<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>就餐预约</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="__INDEX__/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
		<link rel="stylesheet" href="__INDEX__/css/diancan.css" />
		<link rel="stylesheet" type="text/css" href="__INDEX__/datetime/datedropper.css">
		<link rel="stylesheet" type="text/css" href="__INDEX__/datetime/timedropper.min.css">
	</head>

	<body>
		<header class="mui-bar mui-bar-nav dianc_nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">就餐预约</h1>
		</header>
		<div class="mui-content" style="background: white;">
			<form id="form" class="mui-input-group ddyy_list">
				<div class="mui-input-row">
					<label>选择日期：</label>
					<input id='pickdate' name='pickdate' onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" type='text' placeholder="选择日期" class="form-control layer-date" />
				</div>
				<div class="mui-input-row">
					<label>选择时间：</label>
					<input id='picktime' name='picktime' onclick="WdatePicker({dateFmt:'HH:mm:00'})" type='text' placeholder="选择时间" class="form-control layer-date" />
				</div>
				<div class="mui-input-row">
					<label>就餐人数：</label>
					<div class="mui-numbox">
						<button class="mui-btn mui-btn-numbox-minus" onclick="change_num()" type="button">-</button>
						<input class="mui-input-numbox" id="number" type="number">
						<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
					</div>
				</div>
				<div class="mui-input-row">
					<label>是否需要包房：</label>
					<div class="mui-switch mui-switch-blue ">
						<div class="mui-switch-handle"></div>
					</div>
					<span></span>
				</div>
				<div class="mui-input-row">
					<label>联系人：</label>
					<input type="text" id="name" class="mui-input-group" placeholder="请输入联系人">
				</div>
				<div class="mui-input-row">
					<label>联系电话：</label>
					<input type="text" id="phone" class="mui-input-group" placeholder="请输入联系电话">
				</div>
			</form>
			<div class="dcyy_tip"><textarea id="message" placeholder="备注信息"></textarea></div>
			<div class="dcyy_btn"><button type="button" onclick="diancai()" class="mui-btn mui-btn-danger">确认操作</button></div>

		</div>

		<input type="hidden" id="need_house" value="不需要" />
	</body>

</html>

<script type="text/javascript" src="__INDEX__/js/jquery.min.js"></script>
<script type="text/javascript" src="__INDEX__/js/layer/layer.min.js"></script>
<script src="__INDEX__/js/mui.min.js"></script>
<script src="__INDEX__/js/castapp.js"></script>
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript">
	mui.init()

	function change_num() {
		var value = $("#number").val();
		if(value <= 0) {
			$("#number").val(1);
		}
	}
	mui.init({
		swipeBack: true //启用右滑关闭功能
	});
	mui('.mui-switch').each(function() { //循环所有toggle
		this.addEventListener('toggle', function(event) {
			//event.detail.isActive 可直接获取当前状态
			var checked = this.classList.contains('mui-active') ? '需要' : '不需要';
			$("#need_house").val(checked);
		});
	});

	function diancai() {
		var dt = $("#pickdate").val();
		if(dt == "") {
			layer.msg("请选择预约日期");
			return false;
		}
		var name = $("#name").val();
		if(name == "") {
			layer.msg("请输入联系人");
			return false;
		}
		var phone = $("#phone").val();
		if(phone == "") {
			layer.msg("请输入联系号码");
			return false;
		}
		var data = {};
		data['date'] = dt;
		data['time'] = $("#picktime").val();
		data['name'] = name;
		data['phone'] = phone;
		data['number'] = $("#number").val();
		data['need_house'] = $("#need_house").val();
		data['message'] = $("#message").val();
		data['uid'] = getUid();
		data['store_id'] = getUrlParam("store_id");
		$.ajax({
			url: APP.api_url + 'Member/add_yy',
			data: {
				token: get_token(),
				uid: getUid(),
				data: data
			},
			type: "post",
			success: function(dt) {
				layer.msg(dt.msg);
				if(dt.code == 200) {
					location.href="/member/yuyues.html";
				}
			}
		})

	}
</script>